<template>
  <div class="main">

    <h2 class="top">
      添加用户
    </h2>

    <!-- form表单中的内容 -->
    <div class="allform">
      <!-- 次顶部步骤条 -->
      <div class="steps">
        <el-steps :active="active" finish-status="success" space="300px">
          <el-step title="基本信息">1</el-step>
          <el-step title="用户资料">2</el-step>
          <el-step title="确认信息">3</el-step>
        </el-steps>
      </div>
      <!-- 中间内容 -->
      <!-- 基本信息 -->
      <div v-if="active == 0" class="form">
        <el-form :model="user">
          <el-form-item label="请输入学号" :label-width="formLabelWidth" prop="userId">
            <el-input v-if="user.userId !=''" v-model="user.userId" placeholder="user.userId" class="input" maxlength="20" />
            <el-input v-if="user.userId ==''" v-model="user.userId" placeholder="请输入学号" class="input" maxlength="20" />
          </el-form-item>
          <el-form-item label="请输入密码" :label-width="formLabelWidth" prop="userPwd">
            <el-input v-if="user.userPwd !=''" v-model="user.userPwd" placeholder="user.userPwd" class="input" maxlength="20" />
            <el-input v-if="user.userPwd ==''" v-model="user.userPwd" placeholder="请输入密码" class="input" maxlength="20" />
          </el-form-item>
          <el-form-item label="请选择用户类型" :label-width="formLabelWidth" prop="userType">
            <template>
              <el-radio v-model="user.userType" label="1" class="input1">用户</el-radio>
              <el-radio v-model="user.userType" label="2">管理员</el-radio>
            </template>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="savaUser">下一步</el-button>
        </div>
      </div>
      <!-- 用户资料 -->
      <div v-if="active==1" class="form">
        <el-form :model="userInfo">
          <el-form-item label="学号" :label-width="formLabelWidth" prop="userId">
            <el-input
              v-model="user.userId"
              placeholder="user.userId"
              :disabled="true"
              class="input"
              maxlength="20"
            />
          </el-form-item>
          <el-form-item label="用户名" :label-width="formLabelWidth" prop="userName">
            <el-input v-if="userInfo.userName !=''" v-model="userInfo.userName" placeholder="userInfo.userName" class="input" maxlength="20" />
            <el-input v-if="userInfo.userName ==''" v-model="userInfo.userName" placeholder="请输入用户名" class="input" maxlength="20" />
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth" prop="userSex">
            <template>
              <el-radio v-model="userInfo.userSex" label="男" class="input1">男</el-radio>
              <el-radio v-model="userInfo.userSex" label="女">女</el-radio>
            </template>
          </el-form-item>
          <el-form-item label="生源地" :label-width="formLabelWidth" prop="userOrigin">
            <template>
              <el-select v-model="userInfo.userOrigin" placeholder="请选择" class="input">
                <el-option-group
                  v-for="group in options"
                  :key="group.label3"
                  :label="group.label3"
                >
                  <el-option
                    v-for="item in group.options"
                    :key="item.value3"
                    :label="item.label3"
                    :value="item.value3"
                  />
                </el-option-group>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="学部" :label-width="formLabelWidth" prop="userPartName">
            <template>
              <el-select v-model="userInfo.userPartName" placeholder="请选择" class="input">
                <el-option
                  v-for="item in options1"
                  :key="item.value1"
                  :label="item.label1"
                  :value="item.value1"
                />
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="班级" :label-width="formLabelWidth" prop="userClassName">
            <el-input v-if="userInfo.userClassName !=''" v-model="userInfo.userClassName" placeholder="userInfo.userClassName" class="input" maxlength="20" />
            <el-input v-if="userInfo.userClassName ==''" v-model="userInfo.userClassName" placeholder="请输入班级" class="input" maxlength="20" />
          </el-form-item>
          <el-form-item label="入学年份" :label-width="formLabelWidth" prop="userLevel">
            <template>
              <el-select v-model="userInfo.userLevel" placeholder="请选择" class="input">
                <el-option
                  v-for="item in options2"
                  :key="item.value2"
                  :label="item.label"
                  :value="item.value2"
                />
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="手机号" :label-width="formLabelWidth" prop="userPhone">
            <el-input v-if="userInfo.userPhone !=''" v-model="userInfo.userPhone" placeholder="userInfo.userPhone" class="input" maxlength="20" />
            <el-input v-if="userInfo.userPhone ==''" v-model="userInfo.userPhone" placeholder="请输入手机号" class="input" maxlength="20" />
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth" prop="userEmail">
            <el-input v-if="userInfo.userEmail !=''" v-model="userInfo.userEmail" placeholder="userInfo.userEmail" class="input" />
            <el-input v-if="userInfo.userEmail ==''" v-model="userInfo.userEmail" placeholder="请输入邮箱" class="input" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button v-if="active!=0" style="margin-top: 12px;" @click="goback">上一步</el-button>
          <el-button type="primary" @click="savaUserInfo">下一步</el-button>
        </div>
      </div>
      <!-- 确认信息 -->

      <div v-if="active==2" class="form">
        <el-form :model="user">
          <el-form-item label="姓名" :label-width="formLabelWidth" prop="userName" class="input">
            <el-input
              v-model="userInfo.userName"
              placeholder="userInfo.userName"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="学号" :label-width="formLabelWidth" prop="userId" class="input">
            <el-input
              v-model="user.userId"
              placeholder="user.userId"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth" prop="userSex" class="input">
            <el-input
              v-model="userInfo.userSex"
              placeholder="userInfo.userSex"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth" prop="userPwd" class="input">
            <el-input
              v-model="user.userPwd"
              placeholder="user.userPwd"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="用户类型" :label-width="formLabelWidth" prop="userType" class="input">
            <el-input
              v-model="user.userType"
              placeholder="user.userType"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="生源地" :label-width="formLabelWidth" prop="userOrigin" class="input">
            <el-input
              v-model="userInfo.userOrigin"
              placeholder="userInfo.userOrigin"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="学部" :label-width="formLabelWidth" prop="userPartName" class="input">
            <el-input
              v-model="userInfo.userPartName"
              placeholder="userInfo.userPartName"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="班级" :label-width="formLabelWidth" prop="userClassName" class="input">
            <el-input
              v-model="userInfo.userClassName"
              placeholder="userInfo.userClassName"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="入学年份" :label-width="formLabelWidth" prop="userLevel" class="input">
            <el-input
              v-model="userInfo.userLevel"
              placeholder="userInfo.userLevel"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="手机号" :label-width="formLabelWidth" prop="userPhone" class="input">
            <el-input
              v-model="userInfo.userPhone"
              placeholder="userInfo.userPhone"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth" prop="userEmail" class="input">
            <el-input
              v-model="userInfo.userEmail"
              placeholder="userInfo.userEmail"
              :disabled="true"
            />
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button v-if="active!=0" style="margin-top: 12px;" @click="goback">上一步</el-button>
          <el-button type="success" @click="onSubmit">提交</el-button>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { addUser } from '../../api/user.js'
export default {

  data() {
    // 这里存放数据
    return {
      currentPage: 1, // 默认显示页面为1
      pagesize: 5, //    每页的数据条数
      list: [],
      listLoading: true,
      userId: '',
      show: false,
      dialogFormVisible: false,
      search: {},
      active: 0,
      formLabelWidth: '150px',
      // 用户信息
      user: {
        userId: '', // 用户编号
        userPwd: '', // 用户密码
        userType: '', // 用户类型（0用户，1管理员）
        userStatus: '1', // 用户状态（0封禁，1未封禁）
        userOldStatus: '2' // 用户是否加入老乡会（1加入，2未加入）
      },
      // 用户详细信息
      userInfo: {
        userId: '', // 用户编号
        userName: '', // 用户名称
        userSex: '', // 用户性别
        userOrigin: '', // 用户生源地
        userClassName: '', // 用户班级
        userPartName: '', // 用户年级
        userLevel: '', // 用户等级（2018）
        userPhone: '', // 用户手机号
        userEmail: '' // 用户邮箱
      },
      // 年级选择
      options2: [{
        value2: '2014',
        label2: '2014'
      }, {
        value2: '2015',
        label2: '2015'
      }, {
        value2: '2016',
        label2: '2016'
      }, {
        value2: '2017',
        label2: '2017'
      }, {
        value2: '2018',
        label2: '2018'
      }, {
        value2: '2019',
        label2: '2019'
      }, {
        value2: '2020',
        label2: '2020'
      }, {
        value2: '2021',
        label2: '2021'
      }, {
        value2: '2022',
        label2: '2022'
      }, {
        value2: '2023',
        label2: '2023'
      }, {
        value2: '2024',
        label2: '2024'
      }, {
        value2: '2025',
        label2: '2025'
      }, {
        value2: '2026',
        label2: '2026'
      }, {
        value2: '2027',
        label2: '2027'
      }, {
        value2: '2028',
        label2: '2028'
      }, {
        value2: '2029',
        label2: '2029'
      }, {
        value2: '2030',
        label2: '2030'
      }],
      // 学部选择
      options1: [{
        value1: '经济管理学部',
        label1: '经济管理学部'
      }, {
        value1: '信息学部',
        label1: '信息学部'
      }, {
        value1: '城市建设学部',
        label1: '城市建设学部'
      }, {
        value1: '表演学部',
        label1: '表演学部'
      }, {
        value1: '教育学部',
        label1: '教育学部'
      }, {
        value1: '艺术设计学部',
        label1: '艺术设计学部'
      }, {
        value1: '生物医药学部',
        label1: '生物医药学部'
      }, {
        value1: '国际语言文化学部',
        label1: '国际语言文化学部'
      }, {
        value1: '公共管理学部',
        label1: '公共管理学部'
      }, {
        value1: '工艺美术系',
        label1: '工艺美术系'
      }],
      // 城市选择
      options: [{
        label3: '直辖市',
        options: [{
          value3: '北京市',
          label3: '北京市'
        }, {
          value3: '天津市',
          label3: '天津市'
        }, {
          value3: '上海市',
          label3: '上海市'
        }, {
          value3: '重庆市',
          label3: '重庆市'
        }]
      }, {
        label3: '省',
        options: [{
          value3: '河北省',
          label3: '河北省'
        }, {
          value3: '山西省',
          label3: '山西省'
        }, {
          value3: '辽宁省',
          label3: '辽宁省'
        }, {
          value3: '吉林省',
          label3: '吉林省'
        }, {
          value3: '黑龙江省',
          label3: '黑龙江省'
        }, {
          value3: '江苏省',
          label3: '江苏省'
        }, {
          value3: '浙江省',
          label3: '浙江省'
        }, {
          value3: '安徽省',
          label3: '安徽省'
        }, {
          value3: '福建省',
          label3: '福建省'
        }, {
          value3: '江西省',
          label3: '江西省'
        }, {
          value3: '山东省',
          label3: '山东省'
        }, {
          value3: '河南省',
          label3: '河南省'
        }, {
          value3: '湖北省',
          label3: '湖北省'
        }, {
          value3: '湖南省',
          label3: '湖南省'
        }, {
          value3: '广东省',
          label3: '广东省'
        }, {
          value3: '海南省',
          label3: '海南省'
        }, {
          value3: '四川省',
          label3: '四川省'
        }, {
          value3: '贵州省',
          label3: '贵州省'
        }, {
          value3: '云南省',
          label3: '云南省'
        }, {
          value3: '陕西省',
          label3: '陕西省'
        }, {
          value3: '甘肃省',
          label3: '甘肃省'
        }, {
          value3: '青海省',
          label3: '青海省'
        }, {
          value3: '台湾省',
          label3: '台湾省'
        }]
      }, {
        label3: '自治区',
        options: [{
          value3: '内蒙古自治区',
          label3: '内蒙古自治区'
        }, {
          value3: '广西壮族自治区',
          label3: '广西壮族自治区'
        }, {
          value3: '西藏自治区',
          label3: '西藏自治区'
        }, {
          value3: '宁夏回族自治区',
          label3: '宁夏回族自治区'
        }, {
          value3: '新疆维吾尔自治区',
          label3: '新疆维吾尔自治区'
        }]
      }, {
        label3: '特别行政区',
        options: [{
          value3: '香港特别行政区',
          label3: '香港特别行政区'
        }, {
          value3: '澳门特别行政区',
          label3: '澳门特别行政区'
        }]
      }
      ],
      value: '',
      value1: '',
      value2: ''
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 方法集合
  methods: {
    // 每页下拉显示数据
    handleSizeChange: (size) => {
      this.pagesize = size
    },
    // 点击第几页
    handleCurrentChange: (currentPage) => {
      this.currentPage = currentPage
    },
    handleClick(row) {
      console.log(row)
    },
    // 下一步
    next() {
      if (this.active++ > 1) this.active = 0
    },
    // 上一步
    goback() {
      if (this.active-- === 0) this.active = 0
    },
    // 未填全信息提示
    warning() {
      this.$message({
        showClose: true,
        message: '请填全信息',
        type: 'error'
      })
    },
    // 保存user信息
    savaUser: function() {
      const that = this
      console.log('当前的user信息为：', this.user)
      if (this.user.userId === '' || this.user.userId === '' || this.user.userType === '') {
        that.warning()
      } else {
        this.active++
      }
    },
    // 保存userInfo信息
    savaUserInfo: function() {
      const that = this
      this.userInfo.userId = this.user.userId
      console.log('当前的userInfo信息为：', this.userInfo)
      if (this.userInfo.userName === '' || this.userInfo.userSex === '' || this.userInfo.userOrigin === '' || this.userInfo.userClassName === '' || this.userInfo.userPartName === '' || this.userInfo.userLevel === '' || this.userInfo.userPhone === '' || this.userInfo.userEmail === '') {
        that.warning()
      } else {
        this.active++
      }
    },
    // 提交信息
    onSubmit: function() {
      const userId = this.user.userId
      const userClassName = this.userInfo.userClassName
      const userEmail = this.userInfo.userEmail
      const userLevel = this.userInfo.userLevel
      const userName = this.userInfo.userName
      const userOrigin = this.userInfo.userOrigin
      const userPartName = this.userInfo.userPartName
      const userPhone = this.userInfo.userPhone
      const userSex = this.userInfo.userSex
      const userOldStatus = this.user.userOldStatus
      const userPwd = this.user.userPwd
      const userStatus = this.user.userStatus
      const userType = this.user.userType
      addUser(userId, userClassName, userEmail, userLevel, userName, userOrigin, userPartName, userPhone, userSex, userOldStatus, userPwd, userStatus, userType).then(data => {
        console.log('添加user成功后返回的数据为', data)
        if (data.msg === '操作成功') {
          this.$message({
            message: '添加用户信息成功',
            type: 'success'
          })
          this.$router.push('/user/show_user/show_user')
        } else {
          this.$message.error('服务器繁忙，请稍后重试')
        }
      })
    }
  }

}
</script>
<style>
  .main{
          margin-left: 5px;
          margin-right: 5px;
      }
  .top{

    padding-left: 20px;
  }
  .steps{
    margin-left: 500px;
    margin-bottom: 40px;
  }
  .form{
    width: 90%;
    margin-left: 500px;
    margin-top: 100px;
  }
  .dialog-footer{
    margin-top: 30px;
    margin-left: 270px;
  }
  .input{
    margin-left: 20px;
    width:30%;
  }
  .input1{
    margin-left: 20px;
  }
</style>
